<script setup>
import { PackAntvX6, Main } from "@ui/pack-antv-x6"
import { h } from "vue";

const icons = [
    h('div', { class: "i-emojione:dotted-six-pointed-star w-1em h-1em" }),
    h('div', { class: "i-noto-v1:dotted-six-pointed-star w-1em h-1em" }),
]

const meta = {
    shape: 'rect',
    width: 100,
    height: 40,
    x: 100,
    y: 100,
    label: 'edge',
}
//
const nodelist = [
    {
        label: 'A',
        icon: icons[0],
        fixed:true,
        children: [
            { icon: icons[0], label: "A-1", meta }, { icon: icons[0], label: "A-2", meta },
            {
                label: 'B',
                icon: icons[1],
                children: [
                    { icon: icons[1], label: "B-1", meta }, { icon: icons[1], label: "B-2", meta }
                ]
            }
        ]
    },
    {
        label: 'B',
        icon: icons[1],
        fixed: true,
        children: [
            { icon: icons[1], label: "B-1", meta }, { icon: icons[1], label: "B-2", meta },
            {
                label: 'A',
                icon: icons[0],
                // fixed:true,
                children: [
                    { icon: icons[0], label: "A-1", meta }, { icon: icons[0], label: "A-2", meta },
                    {
                        label: 'B',
                        icon: icons[1],
                        children: [
                            { icon: icons[1], label: "B-1", meta }, { icon: icons[1], label: "B-2", meta }
                        ]
                    }
                ]
            },
        ]
    },
]

const main = new Main();
// //
main.nodelist.setList(nodelist);
main.graph.mode.value = 'prod'
//
setTimeout(() => {
    main.menu.resetTitle('AAAAAAAAA')
    // main.drawer.open(h('div','这是一个测试。。。。。。。。。。。。。。。'))
}, 2000)

main.graph.onMounted((graph) => {
    graph.on('blank:contextmenu', ({ e }) => {
        console.log(e)
        main.contextmenu.open(e, h('div', '测试 contextmenu'))
    })
})
</script>

<template>
    <div class="w-full h-400px">
        <PackAntvX6 :main="main"></PackAntvX6>
    </div>
</template>